<template>
  <div class="assign-teacher">
    <!-- 筛选条件 -->
    <condition-card @reset="reset" @search="search">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('label.college')">
            <DictSelect class="max-width-240px" v-model="query.departmentCode" :clearable="true" :data="options.departmentCode" ></DictSelect>
          </el-form-item>
        </el-col>
      </el-row>
    </condition-card>

    <el-card >
      <!-- <h2>{{$t('classroomTower.borrowTeacher')}}</h2> -->
      <div class="search mb-8px">
        <div class="search-left">
          <div class="search-cont">
            <el-input v-model="query.teacherName" :placeholder="$t('classroomCheckTips.searchNameOrCode')" suffix-icon="el-icon-search" style="width:240px" @keyup.enter.native="search" />
          </div>
        </div>
        <div class="search-right">
          <el-button type="primary" @click="openAddDialog" icon="el-icon-plus">{{$t('message.add1')}}</el-button>
        </div>
      </div>
      <EduTable :order="true" :selection="false" :data="teacherList.data" :total="teacherList.total" :pageSize="query.pageSize_" :pageNum="query.pageNum_"  @page-change="pageChange" >
        <el-table-column :label="$t('courseSummary.teacherCode')">
          <template slot-scope="scpoe">{{scpoe.row.teacherCode}}</template>
        </el-table-column>
        <el-table-column :label="$t('classroom.teacherName')">
          <template slot-scope="scope">{{scope.row.teacherName}}</template>
        </el-table-column>
        <el-table-column :label="$t('label.college')">
          <template slot-scope="scope">{{scope.row.departmentCodeI18n}}</template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">{{scope.row.createTime}}</template>
        </el-table-column>
        <el-table-column :label="$t('message.operating')">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="delTeacher(scope.row)">{{$t('message.delete')}}</el-button>
          </template>
        </el-table-column>
      </EduTable>
    </el-card>

    <!--  教师添加  -->
    <edu-dialog ref="addTeacher" :title="$t('classroomTower.addTeacher')" width="60%">
      <div class="search mb-8px">
        <div class="search-left">
          <div class="search-cont">
            <el-input v-model="queryDialog.condition" :placeholder="$t('classroomCheckTips.searchNameOrCode')" @change="searchDialog"></el-input>
          </div>
          <div class="search-dept">
            <div class="dept-label">{{$t("classroom.department1")}}</div>
            <div class="dept-code">
              <DictSelect v-model="queryDialog.faculty" :clearable="true" :data="options.departmentCode" ></DictSelect>
            </div>
          </div>
        </div>
        <div class="search-right">
          <el-button @click="resetDialog">{{$t("message.reset")}}</el-button>
          <el-button type="primary" @click="searchDialog">{{$t("message.filter")}}</el-button>
        </div>
      </div>
      <EduTable :order="true" :selection="true" :data="teacherListDialog.data" :total="teacherListDialog.total"
        :pageSize="queryDialog.pageSize_" :pageNum="queryDialog.pageNum_" @page-change="pageChangeDialog" @selection-change="handleSelectionChange" >
        <el-table-column :label="$t('courseSummary.teacherCode')">
          <template slot-scope="scope">{{scope.row.code}}</template>
        </el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <el-table-column :label="$t('label.sex')">
          <template slot-scope="scope">{{scope.row.sexI18n}}</template>
        </el-table-column>
        <el-table-column :label="$t('label.college')">
          <template slot-scope="scope">
            <el-tooltip placement="top" :content="scope.row.facultyI18n" effect="light">
              <span>{{scope.row.facultyI18n}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column :label="$t('classroom.phone')">
          <template slot-scope="scope">
            <el-tooltip placement="top" :content="scope.row.phone" effect="light">
              <span>{{scope.row.phone}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </EduTable>
      <span slot="buttons">
        <el-button type="primary" @click="commitAddTeacher" icon="el-icon-check">{{$t("message.confirm")}}</el-button>
      </span>
    </edu-dialog>
  </div>
</template>

<script>
import { queryDic } from "common/src/api/dictionary";
import * as teacherAPI from "common/src/api/resource/teachers";
import UTILS from "common/src/utils/utils";
import * as API from "common/src/api/resource/classroom";

export default {
  name: "assignTeacher",
  components: {},
  data() {
    return {
      // 查询列表字段
      query: {
        pageNum_: 1,
        pageSize_: 20,
        teacherName: "",
        departmentCode: ""
      },
      queryDialog: {
        pageNum_: 1,
        pageSize_: 20,
        showAllTeacher: "1",
        condition: "",
        faculty: ""
      },
      // 部门、学院下拉数据
      options: {
        departmentCode: []
      },
      // 教师列表
      teacherList: {
        data: [],
        total: 0
      },
      teacherListDialog: {
        data: [],
        total: 0
      },
      // 教师添加list
      teacherAddList: [],
      currentManageDptId:''
    };
  },
  methods: {
    setProjectId(){
      let mockerUser = this.$store.getters.getMockUser();
      let user = mockerUser ? mockerUser:this.$store.getters.getUser();
      this.currentManageDptId = user.currentManageDptId;
    },
    // 获取借用教室方法
    async getBorTeacher() {
      let res = await API.BorTeacherPage(this.query);
      if (res && res.code == 200) {
        this.teacherList.data = res.data.list;
        this.teacherList.total = res.data.total_;
        this.query.pageSize_ = res.data.pageSize_;
        this.query.pageNum_ = res.data.pageNum_;
      }
    },
    async getBorTeacherDialog() {
      let res = await teacherAPI.findTeacherList(this.queryDialog);
      if (res && res.code == 200) {
        this.teacherListDialog.data = res.data.list;
        this.teacherListDialog.total = res.data.total_;
      }
    },
    // 获取下拉框数据（数据字典）
    initOptions() {
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_YX"]
      };
      queryDic(data).then(res => {
        if (res.code == 200) {
          UTILS.fillSelect(
            {
              departmentCode: "X_YX"
            },
            res.data,
            this.options
          );
        }
      });
    },

    pageChange(val) {
      this.query.pageNum_ = val.pageNum;
      this.query.pageSize_ = val.pageSize;
      this.getBorTeacher();
    },
    pageChangeDialog(val) {
      this.queryDialog.pageNum_ = val.pageNum;
      this.queryDialog.pageSize_ = val.pageSize;
      this.getBorTeacherDialog();
    },
    handleSelectionChange(val) {
      this.teacherAddList = [];
      val.forEach(index => {
        this.teacherAddList.push({
          teacherCode: index.code,
          teacherName: index.name,
          departmentCode: index.faculty
        });
      });
    },
    //
    openAddDialog() {
      this.queryDialog = {
        condition: "",
        faculty: "",
        showAllTeacher: "1",
        pageNum_: 1,
        pageSize_: 20
      };
      this.$refs.addTeacher.open();
      this.getBorTeacherDialog();
    },
    // 弹窗 添加教师确定
    // 弹窗 查询重置
    resetDialog() {
      this.queryDialog = {
        condition: "",
        faculty: "",
        showAllTeacher: "1",
        pageNum_: 1,
        pageSize_: 20
      };
      this.teacherAddList = [];
      this.getBorTeacherDialog();
    },
    reset() {
      this.query = {
        teacherName: "",
        departmentCode: "",
        pageNum_: 1,
        pageSize_: 20
      };
      this.getBorTeacher();
    },
    commitAddTeacher() {
      if (this.teacherAddList.length > 0) {
        API.addTeacher(this.teacherAddList).then(res => {
          if (res && res.code === 200) {
            this.$message({
              type: "success",
              message: this.$t("classroomResponseMessage.addTeacherSuccess")
            });
            this.$refs.addTeacher.close();
            this.getBorTeacher();
          } else {
            this.$message({
              type: "info",
              message: response.msg
            });
          }
        });
      } else {
        this.$message({
          type: "info",
          message: this.$t("classroomCheckTips.plzChooseOneTeacher")
        });
      }
    }, // 删除教学楼操作
    delTeacher(data) {
      let params = {
        id: data.id,
        teacherCode: data.teacherCode,
        teacherName: data.teacherName
      };
      this.$confirm(
        this.$t("message.deleteConfirm"),
        this.$t("message.confirm"),
        {
          distinguishCancelAndClose: false,
          confirmButtonText: this.$t("message.confirm"),
          cancelButtonText: this.$t("message.cancel")
        }
      ).then(() => {
        API.delTeacher(params).then(res => {
        if (res && res.code === 200) {
          this.$message({
            type: "success",
            message: this.$t("message.deleteSuccess")
          });
          this.getBorTeacher();
        }
      });
      });
    },
    search() {
      this.query.pageNum_ = 1;
      this.getBorTeacher();
    },
    searchDialog() {
      this.queryDialog.pageNum_ = 1;
      this.getBorTeacherDialog();
    }
  },
  created() {
    this.initOptions();
    this.getBorTeacher();
    this.setProjectId();
  }
};
</script>

<style lang="scss" scoped>
.assign-teacher {
  margin-top: 32px;
  .search {
    display: flex;
    .search-left,
    .search-right {
      flex: 1;
      display: flex;
    }
    .search-left {
      .search-cont {
        flex: 1;
      }
      .search-dept {
        flex: 1;
        display: flex;
        align-items: center;
        .dept-label {
          flex: 1;
          text-align: right;
        }
        .dept-code {
          flex: 2;
        }
      }
    }
    .search-right {
      justify-content: flex-end;
    }
  }
}
</style>
